<template>
  <div class="analysis common-card">
    <div class="title">数据概览</div>
    <div class="analysis-row">
      <a-row :gutter="14" class="analysis-row-bottom">
        <a-col :span="8" :loading="loading">
          <div class="card card1-bgColor">
            <div class="card-title">设备总数</div>
            <div class="crd-data">
              <CountTo :startVal="1" :endVal="state.total_device_count" class="text-2xl" />
            </div>
          </div>
        </a-col>
        <a-col :span="8" :loading="loading" @click.stop="jumpDeviceList(1)">
          <div class="card card2-bgColor pointer">
            <div class="card-title">在线设备数</div>
            <div class="crd-data">
              <CountTo :startVal="1" :endVal="state.online_device_count" class="text-2xl" />
            </div>
          </div>
        </a-col>
        <a-col :span="8" :loading="loading" @click.stop="jumpDeviceList(0)">
          <div class="card card3-bgColor pointer">
            <div class="card-title">离线设备数</div>
            <div class="crd-data">
              <CountTo :startVal="1" :endVal="state.offline_device_count" class="text-2xl" />
            </div>
          </div>
        </a-col>
      </a-row>

      <a-row :gutter="8">
        <a-col :span="8" :loading="loading" @click.stop="jumpDeviceList(2)">
          <div class="card card4-bgColor pointer">
            <div class="card-title">未知设备数</div>
            <div class="crd-data">
              <CountTo :startVal="1" :endVal="state.unknow_device_count" class="text-2xl" />
            </div>
          </div>
        </a-col>
        <a-col :span="8" :loading="loading">
          <div class="card card5-bgColor">
            <div class="card-title">当日实时数据采集量</div>
            <div class="crd-data">
              <CountTo :startVal="1" :endVal="state.today_data_count" class="text-2xl" />
              <span class="rate">({{ state.today_collection_rate }}%)</span>
            </div>
            <div class="last-days"
              >上日数
              <CountTo class="marginleft16" :startVal="1" :endVal="state.yesterday_data_count" />
              ({{ state.yesterday_collection_rate }}%)</div
            >
          </div>
        </a-col>
        <a-col :span="8" :loading="loading">
          <div class="card card6-bgColor">
            <div class="card-title"
              >当日报警量
              <a-tooltip
                title="设备5分钟无采集数据视为离线,设备每次从在线切换为离线计一次离线报警！"
                class="tip"
                placement="top"
              >
                <info-circle-outlined
                  style="color: rgba(0, 0, 0, 0.45); margin-left: 4px"
                /> </a-tooltip
            ></div>
            <div class="crd-data">
              <CountTo :startVal="1" :endVal="state.today_alarm_count" class="text-2xl" />
            </div>
            <div class="last-days"
              >上日数： <CountTo :startVal="1" :endVal="state.yesterday_alarm_count"
            /></div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { CountTo } from '/@/components/CountTo/index';
  import { onMounted, reactive } from 'vue';
  import { gatewayoverview, getdeviceinfo, getalarminfo } from '/@/api/sys/gateway/gateway';
  import { InfoCircleOutlined } from '@ant-design/icons-vue';
  import { useRouter } from 'vue-router';

  defineProps({
    loading: {
      type: Boolean,
    },
  });

  const router = useRouter();
  const state = reactive({
    total_device_count: 0,
    online_device_count: 0,
    offline_device_count: 0,
    today_data_count: 0,
    yesterday_data_count: 0,
    today_alarm_count: 0,
    yesterday_alarm_count: 0,
    today_collection_rate: 0,
    yesterday_collection_rate: 0,
    unknow_device_count: 0,
  });
  //点击跳转设备列表现在携带设备状态
  function jumpDeviceList(status) {
    router.push({
      name: 'SubEquipment',
      params: {
        status: status,
      },
    });
  }
  function getList() {
    //获取设备信息
    getdeviceinfo().then((res) => {
      console.log(res);
      state.total_device_count = res.total_device_count;
      state.offline_device_count = res.offline_device_count;
      state.online_device_count = res.online_device_count;
      state.unknow_device_count = res.unknow_device_count;
    });
    //获取设备信息
    getalarminfo().then((res) => {
      state.today_alarm_count = res.today_alarm_count;
      state.yesterday_alarm_count = res.yesterday_alarm_count;
    });
    //获取采集量
    gatewayoverview().then((res) => {
      state.today_data_count = res.today_data_count;
      state.yesterday_data_count = res.yesterday_data_count;
      state.today_collection_rate = res.today_collection_rate;
      state.yesterday_collection_rate = res.yesterday_collection_rate;
    });
  }

  onMounted(() => {
    getList();
  });
</script>

<style lang="less">
  .analysis {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin-bottom: 20px;
    .title {
      font-weight: 500;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.8);
      position: relative;
      padding-left: 12px;
      box-sizing: border-box;
      margin-bottom: 9px;
      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 16px;
        background: #2367fa;
        border-radius: 2px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        margin: auto;
        left: 0px;
      }
    }

    .pointer {
      cursor: pointer;
    }
    .card {
      height: 139px;
      padding: 16px 24px !important;
      box-sizing: border-box;
      border-radius: 5px;
      .card-title {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        color: #3a3837;
      }
      .crd-data {
        margin: 12px 0px;
        .rate {
          margin-left: 7px;
          color: #3a3837;
          font-size: 14px;
          opacity: 0.65;
        }
      }
      .text-2xl {
        font-size: 40px;
        font-weight: bold;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #3a3837;
      }
      .last-days {
        color: #3a3837;
        font-size: 16px;
        opacity: 0.65;
        .marginleft16 {
          margin-left: 16px;
        }
      }
    }
    .analysis-row-bottom {
      margin-bottom: 10px;
    }
    .card1-bgColor {
      background-color: #f0f7fe;
    }
    .card2-bgColor {
      background-color: #e9fefa;
    }
    .card3-bgColor {
      background-color: #fcf0ee;
    }
    .card4-bgColor {
      background-color: #fefcf1;
    }
    .card5-bgColor {
      background-color: #eff7fd;
    }
    .card6-bgColor {
      background-color: #fcf2eb;
    }

    .red {
      color: #fd061d;
    }

    .green {
      color: green;
    }
    .blue {
      color: #1890ff;
    }
    .tipcard {
      position: relative;

      .tip {
        position: absolute;
        right: 12px;
        top: 14px;
        width: 20px;
        height: 20px;
      }
    }
  }
</style>
